<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>辅助类和响应式工具</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .a{
            height:50px;
            border:1px solid #ccc;
            background:#eee;
        }
        div
        {
            width: 200px;
        }
    </style>
</head>
<body style="margin: 50px;">
<!--文字颜色
    <p class="text-muted">
        ccccc
    </p>
    -->
<!--
    背景颜色
    <p class="bg-info">
        ccccc
    </p>
-->
<!--
    关闭按钮
<button class="close">&times;</button>
-->
<!--
    倒三角
<span class="caret"></span>
-->
<!--
    左右浮动
<div class="pull-left a">左边</div>
<div class="pull-right a">右边</div>
-->
<!--
必须是块元素，居中
<div class="center-block a">居中</div>
-->
<!--
    清楚浮动
<div class="pull-left a">左边</div>
加在中间就行了 <div class="clearfix"></div>
<div class="pull-right a">右边</div>
-->
<!--
    加强了优先级
<div class="show">显示</div>
<div class="hide">隐藏</div>
-->




<!--响应式-->
<!--
大屏幕下不显示，小屏幕下显示
<div class="visible-xs-block">超小屏激活显示</div>
-->
<!--
大屏幕下不隐藏，小屏幕下隐藏
<div class="hidden-xs a">超小屏激活隐藏</div>
-->






</body>
</html>